<template>
  <div class="main">
    <mavon-editor style="height: 580px; width: 1200px; z-index:1;border: 1px solid #d9d9d9; " v-model="projects.content"/>
    <div>
      <a-button style="float: right; margin-right: 16px; margin-top: 10px; " type="primary" @click="showDrawer">项目发布</a-button>
      <a-drawer
        title="发布项目"
        :width="720"
        :visible="visible"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose" >
        <a-form :form="form" layout="vertical" hide-required-mark>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="项目名称">
                <a-input
                  v-model="projects.name"
                  style="width: 200px;"
                  placeholder="Please enter user name"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="项目类型">
                <a-input v-model="projects.type">

                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="项目分类">
                <a-select placeholder="Please select a category" v-model="projects.category" style="width: 222px" @change="handleChange">
                  <a-select-option v-for="(c, index) in categories" :label="c.name" :value="c">
                    {{ c.name }}
                  </a-select-option>
<!--                  <a-select-option value="lucy">-->
<!--                    Lucy-->
<!--                  </a-select-option>-->
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="项目标签">
                <a-select property="tag" mode="multiple" placeholder="Please select a tag" v-model="projects.tag" style="width: 280px;" @change="handleChange">
                  <a-select-option property="tag" v-for="(t, index) in tags" :label="t.name" :value="t" :key="index">
                    {{ t.name }}
                  </a-select-option>
<!--                  <a-select-option value="lucy">-->
<!--                    Lucy-->
<!--                  </a-select-option>-->
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="Github">
                <div style="margin-bottom: 16px">
                  <a-input v-model="projects.github">
<!--                    <a-select slot="addonBefore" default-value="Http://" style="width: 90px">-->
<!--                      <a-select-option value="Https://">-->
<!--                        Https://-->
<!--                      </a-select-option>-->
<!--                    </a-select>-->
<!--                    <a-select slot="addonAfter" default-value=".com" style="width: 80px">-->
<!--                      <a-select-option value=".com">-->
<!--                        .com-->
<!--                      </a-select-option>-->
<!--                    </a-select>-->
                  </a-input>
                </div>

              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="Gitee">
                <div style="margin-bottom: 16px">
                  <a-input v-model="projects.gitee">
<!--                    <a-select slot="addonBefore" default-value="Http://" style="width: 90px">-->
<!--                      <a-select-option value="Https://">-->
<!--                        Https://-->
<!--                      </a-select-option>-->
<!--                    </a-select>-->
<!--                    <a-select slot="addonAfter" default-value=".com" style="width: 80px">-->
<!--                      <a-select-option value=".com">-->
<!--                        .com-->
<!--                      </a-select-option>-->
<!--                    </a-select>-->
                  </a-input>
                </div>

              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item>
                <a-upload
                  v-model="projects.cover"
                  name="file"
                  list-type="picture"

                  :multiple="false"
                  action="http://localhost:82/oss/file/upload"
                  @change="change"
                >
                  <a-button style="margin-top: 28px; "> <a-icon type="upload" /> 上传封面图片 </a-button>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div
          :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="onClose">
            Cancel
          </a-button>
          <a-button type="primary" @click="saveOrUpdate">
            Submit
          </a-button>
        </div>
      </a-drawer>
    </div>

  </div>
</template>

<script>
  import category from "@/api/category";
  import tag from "@/api/tag";
  import project from "@/api/project";
  import blog from "@/api/blog";
  export default {
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      projects: {},
      categories: {},
      tags: [{}],
      projectId: '',
    };
  },
    created() {
      if (this.$route.params && this.$route.params.id) {
        this.projectId = this.$route.params.id;
        this.getProjectEditInfo();
      }

      this.getCategoriesData();
      this.getTagsEntityData();
    },
    methods: {
      getProjectEditInfo() {
        project.getProjectInfoById(this.projectId).then(responses => {
          this.projects = responses.data.projectInfo;
          console.log('project data: ', responses.data.projectInfo)
        })
      },
      change(data) {
        this.projects.cover = data.file.response.data.url;
        console.log("图片地址：", data.file.response.data.url);
        console.log("data：", data);
      },
      saveOrUpdate() {
        project.saveOrUpdateProject(this.projects).then(response => {
          if (!this.projects.id) {
            this.$message.success(
              'success',
              3,
            );
          } else {
            this.$message.success(
              'modified',
              3,
            );
          }

          this.$router.push({path: `/project/list`})
        })
      },

      getCategoriesData() {
      category.getCategories().then(response => {

        let category = this.categories = response.data.categories;
        console.log('分类：', category);
      })
    },
    getTagsEntityData() {
      tag.getTags().then(response => {
        this.tags = response.data.tags;
        console.log('tags：', response.data.tags)
      })
    },
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
  },
};
</script>

<style scoped>

</style>